/**
 * Created by cpoopc on 2016/6/25.
 */
import React from 'react'
import styles from './confirmBox.css'
import { defineMessages, intlShape, injectIntl } from 'react-intl'
import CSSModules from 'react-css-modules'

const messages = defineMessages({
  confirm: {
    id: `confirm`,
    defaultMessage: '确定'
  },
  cancel: {
    id: `cancel`,
    defaultMessage: '取消'
  }
})

@injectIntl
@CSSModules(styles, { allowMultiple: true })
export default class ConfirmBox extends React.Component {
  static propTypes = {
    intl: intlShape.isRequired,
    onConfirm: React.PropTypes.func.isRequired,
    onCancelConfirm: React.PropTypes.func.isRequired,
    show: React.PropTypes.bool.isRequired,
    comfirmTips: React.PropTypes.string
  }

  constructor(props) {
    super(props)
    this.onConfirm = this.onConfirm.bind(this)
    this.onCancelConfirm = this.onCancelConfirm.bind(this)
  }

  onConfirm() {
    this.props.onConfirm && this.props.onConfirm()
  }

  onCancelConfirm() {
    this.props.onCancelConfirm && this.props.onCancelConfirm()
  }

  render() {
    let hideStyle = this.props.show ? '' : styles['hide']
    const { formatMessage } = this.props.intl
    return (
      <div className={`${styles['mask']} ${hideStyle}`}>
        <div className={`${styles['dialog-comfirm-box']} ${this.props.show ? styles['ani'] : ''}`}>
          <div className={styles['comfirm-content']}>
            {this.props.comfirmTips}
          </div>
          <div className={styles['btn-box']}>
            <div className={styles['btn-confirm']} onClick={this.onConfirm}>{formatMessage(messages.confirm)}</div>
            <div className={styles['btn-cancel']} onClick={this.onCancelConfirm}>{formatMessage(messages.cancel)}</div>
          </div>
        </div>
      </div>
    )
  }
}
